<template>
  <el-table :data="tableData" @selection-change="selectChange" v-bind="tableAttributes">
    <template v-for="(item, index) in tableItems" :key="index">
      <!-- 多选列 -->
      <el-table-column v-if="item.type === 'selection'" type="selection"  v-bind="item" />

      <!-- 序号列 -->
      <el-table-column v-else-if="item.type === 'index'" type="index" v-bind="item" />

      <!-- 自定义插槽列 -->
      <el-table-column v-else v-bind="item">
        <template #default="scope">
          <slot :name="item.slotName" :row="scope.row">
            {{ scope.row[item.prop] ?? "-" }}
          </slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script lang="js" setup>
const emit = defineEmits(["handleSelectionChange"]);

const props = defineProps({
  // 表格绑定数据
  tableData: {
    type: Array,
    required: true
  },
  // 表格循环每一列
  tableItems: {
    type: Array,
    required: true
  },
  // el-table api 属性
  tableAttributes: {
    type: Object,
    default: () => ({})
  },
});

// 表格多选change 事件
const selectChange = (rows) => {
  emit("handleSelectionChange", rows);
};
</script>
